<template>
  <div class="index" id="match-results-page">
    <div class="top-banner-box"></div>
    <div class="content">
      <div class="cell-box">
        <div class="policyWelfare-box van-cell">
          <div class="bar4"></div>
          <div class="van-cell__title">
            <p class="welfare-title">相关政策</p>
          </div>
        </div>

        <div style="padding: 6px 15px; background: rgb(239, 250, 244)" @click="togNav('/policyDetails?id='+item.id)" v-for="(item,index) in list" :key="index">
          <span
            class="van-tag van-tag--plain van-tag--round van-hairline--surround"
            >{{item.title}}</span
          >
        </div>
      </div>

      <div class="cell-box a">
        <div class="main-cell van-cell">
          <div class="bar5"></div>
          <div class="van-cell__title">
            <p class="inquiry-title">咨询申报</p>
          </div>
        </div>
      </div>
    </div>

    <form class="form">
      <div class="form-div">
        <div class="form-div-input" v-if="identity == 'q'">
          <div class="upload-div flex-ali">
            <el-upload
              class="avatar-uploader"
              action="http://localhost/api-file/files-anon"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="upload-div-p">
              <p>营业执照上传</p>
              <p>不大于800KB</p>
              <p>支持jpg/bmp/png格式</p>
            </div>
          </div>
        </div>
        <div class="form-div-input">
          <input type="tel" name="tel" v-model="tel" placeholder="联系方式" />
        </div>
        <div class="form-div-input" v-if="identity == 'q'">
          <input
            type="number"
            name="capital"
            v-model="capital"
            placeholder="注册资金"
          />
        </div>
        <div class="form-div-input" v-if="identity == 'q'">
          <el-date-picker
            style="background-color: #F9F9F9"
            v-model="datec"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>

        <div class="form-div-input">
          <textarea
            type="text"
            name="content"
            v-model="content"
            placeholder="咨询内容"
          />
        </div>
        <div class="p">咨询电话：13313881868</div>
        <div class="submit-inquiry-box" @click="submit">提交</div>
      </div>
    </form>
  </div>
</template>
<script>
import { matchPolicy, applyPolicy } from "@/api/service/service";
import { getToken } from "@/utils/auth";
import { Notification, MessageBox, Message } from "element-ui";
export default {
  name: "chooseProject",
  data: function () {
    return {
      questionItemIds: "",
      imageUrl: "", //营业执照
      list: [],
      tel: "",
      content: "",
      capital: "", //注册资金
      datec: "", //时间
      cateId: "", //政策id
      policyIds: "",
      aid: "",
      identity:''
    };
  },
  mounted() {
    this.cateId = this.getQueryString("cateId");
    this.questionItemIds = this.getQueryString("questionItemIds");
    this.identity = this.getQueryString("identity");
    this.apipost1();
  },
  watch: {},

  methods: {
    togNav(e){
        this.$router.push(e)
    },
    //验证手机号码
    isPhoneNum(str) {
      return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(
        str
      );
    },
    apipost1() {
      matchPolicy({
        questionItemIds: this.questionItemIds,
      })
        .then((res) => {
          console.log(res)
          if(res.resp_code === 0){
            this.list = res.datas;
          }
          
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 提交表单
     */
    apipost2() {
      applyPolicy({
        policyIds: this.policyIds,
        phone: this.tel,
        content: this.content,
        businessImg: this.imageUrl,
        foundTime: this.datec,
        registerCapital: this.capital,
      })
        .then((res) => {
          if (res.resp_code === 0) {
            this.centent = "";
            this.tel = "";
            Message({
              message: "提交成功",
              type: "success",
            });
            this.$router.push({ path: "/policymobile" });
          } else {
            Message({
              message: res.resp_msg,
              type: "error",
            });
          }
          // this.list = res.datas;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //提交表单
    submit() {
      if (!this.aid && this.identity == "q") {
        Message({
          message: "请上传营业执照",
          type: "error",
        });
        return;
      }
      if (!this.tel) {
        Message({
          message: "手机号不能为空！",
          type: "error",
        });
        return;
      }
      if (!this.isPhoneNum(this.tel)) {
        Message({
          message: "请输入正确手机号码！",
          type: "error",
        });
        return;
      }
      if (!this.capital && this.identity == "q") {
        Message({
          message: "请填写注册资金",
          type: "error",
        });
        return;
      }
      if (!this.datec && this.identity == "q") {
        Message({
          message: "请选择日期",
          type: "error",
        });
        return;
      }

      if (!this.content) {
        Message({
          message: "咨询内容不能为空！",
          type: "error",
        });
        return;
      }

      let policyIds = "";
      if (this.list) {
        for (let i = 0; i < this.list.length; i++) {
          if (i == 0) {
            policyIds = this.list[i].id;
          } else {
            policyIds = "," + this.list[i].id;
          }
        }
      }
      this.policyIds = policyIds;
      this.apipost2();
    },
    getQueryString(name) {
      let reg = `(^|&)${name}=([^&]*)(&|$)`;
      let r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    handleAvatarSuccess(res, file) {
      //this.req.attachmentId = res.id;
      this.aid = res.id;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isBMP = file.type === "image/bmp";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (isJPG || isPNG || isBMP) {
      } else {
        this.$message.error("上传头像图片只能是 jpg/gif/bmp/png格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG || isPNG || isBMP || isLt2M;
    },
  },
};
</script>
<style scoped>
.index {
  background: #eee;
}
#match-results-page .top-banner-box {
  height: 122px;
  background: transparent
    url(../../assets/policy/match-result-bg.jpg) no-repeat 50%/cover;
}
#match-results-page .list-box {
  margin-top: -70px;
}
#match-results-page .list-item-box {
  background: #fff;
  margin: 10px;
  border-radius: 5px;
  overflow: hidden;
}
.content {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
}
#match-results-page .cell-box {
  margin-bottom: 20px;
}
#match-results-page .cell-box.a {
  margin-bottom: 0;
}
.van-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
}
#match-results-page .bar1,
#match-results-page .bar2,
#match-results-page .bar3,
#match-results-page .bar4,
#match-results-page .bar5 {
  width: 8px;
  background: #f17251;
  margin-right: 10px;
}
#match-results-page .bar4 {
  background: #ef262e;
}
.van-cell:not(:last-child):after {
  position: absolute;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  right: 0;
  bottom: 0;
  left: 16px;
  border-bottom: 1px solid #ebedf0;
  transform: scaleY(0.5);
}
.van-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.5em;
  color: #fff;
  font-size: 10px;
  line-height: normal;
  border-radius: 0.2em;
  border: 1px solid #1989fa;
}
.van-tag--plain {
  background-color: #fff;
}
.van-tag--round,
.van-tag--round:after {
  border-radius: 999px;
  color: #1989fa;
}

#match-results-page .van-tag {
  font-size: 14px;
  margin-bottom: 5px;
}
textarea {
  outline: none;
}
.form .form-div {
  border-radius: 6px;
  box-shadow: 0px 2px 5px 1px rgba(43, 111, 141, 0.18);
  background: #fff;
  padding: 15px;
}
.form .form-div .form-div-input input {
  display: block;
  width: calc(100%);
  padding: 0 10px;
  height: 36px;
  box-sizing: border-box;
  border: 1px solid #BBBBBB;
  background: #F9F9F9;
  border-radius: 4px;
  margin-bottom: 10px;
  font-size: 14px;
}
.form .form-div .form-div-input textarea {
  width: 100%;
  height: 170px;
  padding: 10px;
  box-sizing: border-box;
  background: #F9F9F9;
  border: 1px solid #BBBBBB;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 28px;
}
.form .form-div .p {
  color: #777777;
  font-size: 16px;
  padding-bottom: 10px;
  text-align: center;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
  margin-bottom: 10px;
}
.upload-div {
  margin-bottom: 10px;
}
.upload-div .upload-div-p {
  color: #999;
  font-size: 14px;
  line-height: 21px;
  padding-left: 26px;
}
.avatar-uploader {
  width: 120px;
  height: 100px;
  line-height: 98px;
  text-align: center;
  font-size: 60px;
  background: #F9F9F9;
  border: 1px solid #BBBBBB;
}
.avatar-uploader img {
  width: 120px;
  height: 100px;
}
.btn {
  width: 322px;
  height: 42px;
  background: #3EACC4;
  border-radius: 4px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  line-height: 42px;
  margin: 60px auto;
}
#match-results-page .submit-inquiry-box {
  border-radius: 50px;
  background: pink;
  margin: 15px 10px 10px;
  padding: 15px;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, #00c36f, #00bbc9);
}
</style>
